

<!-- jQuery 3 -->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Morris.js charts -->
<script src="/static/bower_components/raphael/raphael.min.js"></script>
<script src="/static/bower_components/morris.js/morris.min.js"></script>

<!-- Morris charts -->
<link rel="stylesheet" href="/static/bower_components/morris.js/morris.css">

<!-- LINE CHART -->
<div class="chart" id="line-chart" style="height: 300px;"></div>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">用户表日志</h3>

        <div class="box-tools">
          <div class="input-group input-group-sm" style="width: 150px;">
            <input type="text" name="table_search" class="form-control pull-right" placeholder="Search">

            <div class="input-group-btn">
              <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
            </div>
          </div>
        </div>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-hover">
          <tr>
            <th>AccId</th>
            <th>RoleId</th>
            <th>Level</th>
            <th>ItemId</th>
            <th>ActionId</th>
            <th>ConsumeCount</th>
            <th>RecordTime</th>
            <th>SellType</th>
            <th>Operation</th>
          </tr>
          {{range .Items}}
          <tr>
            <td>{{.AccId}}</td>
            <td>{{.RoleId}}</td>
            <td>{{.Level}}</td>
            <td>{{.ItemId}}</td>
            <td>{{.ActionId}}</td>
            <td>{{.ConsumeCount}}</td>
            <td>{{.RecordTime}}</td>
            <td>{{.SellType}}</td>
            <td>
                <button type="button" class="btn btn-success">修改</button>
                <button type="button" class="btn btn-danger">删除</button>
            </td>
          </tr>
          {{end}}
        </table>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
</div>

<div class="col-sm-5">
  <div class="dataTables_info" id="example1_info" role="status" aria-live="polite">
  Showing 1 to 10 of 57 entries
  </div>
</div>
<div class="col-sm-7">
  <div class="dataTables_paginate paging_simple_numbers" id="example1_paginate">
  <ul class="pagination">
    <li class="paginate_button previous disabled" id="example1_previous"><a href="#" aria-controls="example1" data-dt-idx="0" tabindex="0">Previous</a></li>
    <li class="paginate_button active"><a href="#" aria-controls="example1" data-dt-idx="1" tabindex="0">1</a></li>
    <li class="paginate_button "><a href="#" aria-controls="example1" data-dt-idx="2" tabindex="0">2</a></li>
    <li class="paginate_button "><a href="#" aria-controls="example1" data-dt-idx="3" tabindex="0">3</a></li>
    <li class="paginate_button "><a href="#" aria-controls="example1" data-dt-idx="4" tabindex="0">4</a></li>
    <li class="paginate_button "><a href="#" aria-controls="example1" data-dt-idx="5" tabindex="0">5</a></li>
    <li class="paginate_button "><a href="#" aria-controls="example1" data-dt-idx="6" tabindex="0">6</a></li>
    <li class="paginate_button next" id="example1_next"><a href="#" aria-controls="example1" data-dt-idx="7" tabindex="0">Next</a></li>
  </ul>
  </div>
</div>

<script>
  $(function () {
    "use strict";
    // LINE CHART
    var line = new Morris.Line({
      element: 'line-chart',
      resize: true,
      data: [
        {y: '2011 Q1', item1: 2666},
        {y: '2011 Q2', item1: 2778},
        {y: '2011 Q3', item1: 4912},
        {y: '2011 Q4', item1: 3767},
        {y: '2012 Q1', item1: 6810},
        {y: '2012 Q2', item1: 5670},
        {y: '2012 Q3', item1: 4820},
        {y: '2012 Q4', item1: 15073},
        {y: '2013 Q1', item1: 10687},
        {y: '2013 Q2', item1: 8432}
      ],
      xkey: 'y',
      ykeys: ['item1'],
      labels: ['Item 1'],
      lineColors: ['#3c8dbc'],
      hideHover: 'auto'
    });
  });
</script>